<template>
	<!-- 返回之前的页面order下面的待支付 -->
	<view class="iconfont" @click="goback" style=" width: 50rpx;margin-top: 8rpx;font-size: 40rpx;">&#xe6b1;</view>
	<!-- 收货信息 -->
	<view style="background-color: #F2F2F2;" v-for="item in Arr">
		<view class="receiveMsg">
			<view class="iconfont">&#xe67e;</view>
			<view>
				<!-- 渲染 -->
				<view><text>收货人：{{item.s_people}} 电话:{{item.s_tel}}</text></view>
				<view><text>收货地址：{{item.s_dizhi}}</text></view>
			</view>
			<!-- 跳转到选择收货地址页面 -->
			<view class="iconfont" @click="go" style="line-height: 82rpx;">&#xe6a5;</view>
		</view>
		<!-- 添加处方 -->
		<view class="chufang">
			<view><text>添加处方</text> </view>
			<text>药品中包含处方药，请凭处方购买</text>
		</view>
		<!-- 药品信息 渲染 -->
		<view class="medMsg">
			<view style="width: 300rpx; height: 300rpx;">
				<image :src="IP+item.yp_imgsrc" mode=""></image>
			</view>
			<view>
				<text class="describe">Rx</text><text>{{item.yp_mingcheng}}</text><text>×{{item.yaopinshuliang}}</text>
				<view class="">
					规格：{{item.yp_guige}}
				</view>
				<view class="price">
					￥{{item.yp_jiage}}
				</view>
			</view>

		</view>
		<!-- 优惠卷 -->
		<view class="coupons">
			<text>优惠卷</text>
			<view>
				<text>无可用</text>
				<!-- 点击跳转到优惠卷页面 -->
				<view class="iconfont">&#xe6a5;</view>
			</view>
		</view>
		<!-- 私密包装 -->
		<view class="baozhuang">
			<text>选择私密包装</text>
			<switch checked="true" />
		</view>
		<!-- 商品金额运费 -->
		<view class="jineyunfei">
			<view>
				<text>商品金额</text>
				<text>￥{{item.yp_jiage}}</text>
			</view>
			<view>
				<text>运费:</text>
				<tex>￥{{item.yp_yunfei}}</tex>
			</view>
		</view>
		<!-- 支付方式 -->
		<view>
			<view style="width: 100%;background-color: white;margin-top: 30rpx;">支付方式</view>
			<view class="ways">

				<view>
					<view>
						<view>
							<view class="iconfont" style="color: #18BC37;">&#xe602;</view><text>微信支付</text>
						</view>
					</view>
					<view style="display: flex; margin-top: 10rpx;">
						<view>
							<view class="iconfont" style="color: #007AFF;">&#xe6b3;</view><text>微信支付</text>
						</view>
					</view>
				</view>
				<view>
					<radio-group>
						<view>
							<radio :value="wx" />
						</view>
						<view>
							<radio :value="zfb" />
						</view>
					</radio-group>
				</view>
			</view>
			<view class="submitDD">
				<text>总计：￥{{parseInt(item.yp_jiage)*parseInt(item.yaopinshuliang)+parseInt(item.yp_yunfei)}}</text>
				<view @click="subSuccess(item.ypdd_id)"> 提交订单</view>
			</view>

		</view>
	</view>

</template>

<script>
	import {
		onLoad,
	} from '@dcloudio/uni-app';
	import {
		reactive,
		toRefs,
		onMounted
	} from 'vue';
	// 引http
	import http from '../../utils/http.js';
	import {
		useStore
	} from 'vuex';
	let id;
	export default {

		setup() {
			const {
				state,
				getters,
				commit,
				dispatch
			} = useStore()
			onLoad((e) => {
				console.log(e.id)
				id = e.id
			})
			onMounted(() => {
				for (let i = 0; i < state.dingdan.dingdan.length; i++) {
					if (state.dingdan.dingdan[i].ypdd_id == id) {
						data.Arr.push(state.dingdan.dingdan[i])
					}
				}
				console.log(data.Arr)
			})
			let data = reactive({
				IP: 'http://localhost:8088',
				Arr: [],
				go() {
					uni.redirectTo({
						url: '/pages/myorder/address'
					})
				},
				goback() {
					uni.redirectTo({
						url: '/pages/myorder/order?iskind=待发货'
					})
				},
				subSuccess(n) {
					// 由待支付变成待发货
					http({
						url: '/changedaifahuo',
						method: 'post',
						data:{
							id:n
						}
					}).then((res) => {
						data.goback()
						uni.showToast({
							title: '支付成功',
							duration: 2000
						});
					})
				}
			})
			return {
				...toRefs(data)
			}
		},

	}
</script>

<style lang="scss">
	@import url("~@/static/fonts/iconfont.css");

	.receiveMsg {
		background-color: white;
		margin-top: 20rpx;
		display: flex;
		justify-content: space-around;
		padding: 30rpx 0;
	}

	.chufang {
		text-align: center;
		margin-top: 20rpx;
		background-color: white;
		padding: 30rpx 0;

		view {
			text {
				background-color: #DA2222;
				padding: 0 10rpx;
				color: white;
				border-radius: 20%;
			}

		}
	}

	.medMsg {
		background-color: white;
		display: flex;
		padding: 30rpx 0;
		margin-top: 30rpx;

		view:first-child {
			image {
				width: 100%;
				height: 100%;
			}
		}

		.price {
			display: flex;
			justify-content: flex-start;
			color: red;
		}

		.describe {
			background-color: red;
			color: white;
			border-radius: 20%;
			padding: 0 15rpx;
		}
	}

	.coupons {
		display: flex;
		justify-content: space-between;
		line-height: 76.8rpx;
		margin-top: 20rpx;
		background-color: white;
		padding: 30rpx 0;

		view {
			display: flex;
		}
	}

	.baozhuang {
		padding: 30rpx 0;
		line-height: 76.8rpx;
		margin-top: 20rpx;
		background-color: white;
		display: flex;
		justify-content: space-between;
	}

	.jineyunfei {
		padding: 20rpx 0;
		margin-top: 20rpx;
		background-color: white;

		view {
			display: flex;
			justify-content: space-between;
		}
	}

	.ways {
		display: flex;
		justify-content: space-between;
		padding-top: 30rpx;
		margin-bottom: 100rpx;
		background-color: white;

		view {
			view {
				view {
					display: flex;

					.iconfont {
						line-height: 48rpx;
					}
				}

			}
		}
	}

	.submitDD {
		position: fixed;
		bottom: 0rpx;
		display: flex;
		justify-content: space-between;
		background-color: white;
		width: 100%;
		border: 1rpx solid black;
		height: 80rpx;

		text {
			line-height: 80rpx;
		}

		view {
			line-height: 80rpx;
			text-align: center;
			width: 40%;
			border: 1rpx solid red;
			background-color: #DA2222;
			color: white;
			padding: 5rpx 10rpx;
		}
	}
</style>
